import { useState } from "react";

const State = () => {
  const [List, setList] = useState(["jay", "jj", "joLin"]);
  const [Val, setVal] = useState("");
  const clcik = () => {
    if (Val) {
      setList([...List, Val]);
      setVal("");
    }
  };

  return (
    <>
      <input
        type="text"
        value={Val}
        onChange={(e) => {
          return setVal(e.target.value);
        }}
      />
      <button onClick={clcik}>添加</button>
      <ul>
        {List.map((e) => {
          return <li key={e}>{e}</li>;
        })}
      </ul>
    </>
  );
};

export default State;
